<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}
	
	.layout-nav {
		width: 420px;
		margin: 0 auto;
		margin-right: 20px;
	}
</style>
<template>
	<div class="layout">
		<Layout>
			<!-- <Header>
               
            </Header>-->
			<Layout>
				<Sider hide-trigger :style="{background: '#fff',height:'100vh'}">
					<Menu active-name="1-1" theme="light" width="auto" :open-names="['1','2','3']" @on-select="openMenu">
						<Submenu name="1">
							<template slot="title">
								<Icon type="ios-toggle"></Icon>
								控制功能
							</template>
							<MenuItem name="/dashboard">主控面板</MenuItem>
							<MenuItem name="/serverstatus">服务状态</MenuItem>
						</Submenu>
						<Submenu name="2">
							<template slot="title">
								<Icon type="android-settings"></Icon>
								系统管理
							</template>
							<MenuItem name="2-1">设备管理</MenuItem>
							<MenuItem name="2-2">用户管理</MenuItem>
						</Submenu>

					</Menu>
				</Sider>
				<Layout :style="{padding: '0 24px 24px'}">
					<Breadcrumb :style="{margin: '24px 0'}">
						<BreadcrumbItem>控制功能</BreadcrumbItem>
						<BreadcrumbItem>服务状态</BreadcrumbItem>
					</Breadcrumb>
					<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
						<router-view></router-view>
					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>
<script>
	export default {
		mounted() {},
			methods: {
				openMenu(name) {
					this.$router.push(name);
				}
			}

	}
</script>